const innerAudioContext = wx.createInnerAudioContext();

// pages/snow/snow.js
const W = wx.getSystemInfoSync().windowWidth;
const H = wx.getSystemInfoSync().windowHeight;

const snowImage = '/image/heartbroken.png';
// 存储所有的雪花 实例
const snows = [];

// 每秒多上帧
const fps = 30;
// 下落的加速度
const G = 0.005;
// const G = 0.05;
// 速度上限，避免速度过快
const SPEED_LIMIT_X = 1;
const SPEED_LIMIT_Y = 1;
// const SPEED_LIMIT_Y = 10;


Page({


  /**
   * 页面的初始数据
   */
  data: {
    imgUrls: ["cloud://cloud1-0g8b95ub406e2ff5.636c-cloud1-0g8b95ub406e2ff5-1306904184/轮播图/index.jpg"],
    indicatordots:false, //是否显示面板指示点
    autoplay: true, //是否自动切换
    interval: 10000, //自动切换时间间隔
    duration: 1000, //滑动动画时长
    color: "#ffffff", //当前选中的指示点颜色
    swiperHeight: "", //swiper高度
        dataList:[],
        isRefresh: false,
        mp3: ['cloud://cloud1-0g8b95ub406e2ff5.636c-cloud1-0g8b95ub406e2ff5-1306904184/C400004FYJHb1Lo251.m4a'],

    // 背景音乐
        bgm: false,
        
        
        noticeList: [
          {
            url: "",
            context: "魅力皮革城江二哥，欢迎"
          },
          {
            url: "../jiang/jiang",
            context: "一比一模拟抽卡系统，点我传送"
          },
          
          {
            url: "",
            context: "首页封面筹集中..."
          },

          {
            url: "../jw/jw",
            context: "有想法？点这儿和我开展交流"
          },
          {
            url: "",
            context: "1000-7等于多少"
          },
         
      ],
        
      canvasHeight: 0
  },

  goheight: function (e) {
    var width = wx.getSystemInfoSync().windowWidth;
    var heightt = wx.getSystemInfoSync().height
    //获取可使用窗口宽度
    var imgheight = e.detail.height;
    //获取图片实际高度
    var imgwidth = e.detail.width;
    //获取图片实际宽度
    var height = (width * imgheight) / imgwidth + "px";
    //计算等比swiper高度
    this.setData({
      swiperHeight: height,
    });
  },

   
  BGM: function (e) {
    let that = this;
    

    if (that.data.bgm) {
      that.setData({
        bgm: false,
      })
      innerAudioContext.pause(); /**  暂停音乐 */
      wx.showToast({
        title: '停止施法',
        icon: 'none',
        duration: 3000
      })

    } else {
      that.setData({
        bgm: true,
        bgmImgAni: "bgmImgAni"
      })
      // 播放音乐
      innerAudioContext.autoplay = true
      innerAudioContext.loop = true
      innerAudioContext.src = that.data.mp3[0];
      innerAudioContext.play();
      wx.showToast({
        title: '开始吟唱',
        icon: 'none',
        duration: 3000
      })

    }


  },
  
  onSwiperTap: function (event) {

    var id= event.target.dataset.Id;
    
    wx.navigateTo({
    
    url: "/pages/wd/wd?id=" + id
    
    })
    
    },

  clickImg1: function(e){
    var src = e.currentTarget.dataset.src;
    wx.previewImage({
      urls: [src],
    })
  },
  
  clickImg2: function(e){
    var src = e.currentTarget.dataset.src;
    wx.previewImage({
      urls: [src],
    })
  },

  clickImg3: function(e){
    var src = e.currentTarget.dataset.src;
    wx.previewImage({
      urls: [src],
    })
  },


 getData(num=8,page=0){
      wx.cloud.callFunction({
          
          name:"wz",
          data:{
              num:num,
              page:page,
          }
      }).then(res=>{
          var oldData=this.data.dataList
          var newData=oldData.concat(res.result.data);
          this.setData({
              dataList:newData,
              isRefresh: true
          })
      })
 },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
      this.getData()

      let ctx = null;


      let tickCount = 150;  //雪花生成的阈值， 当 ticker 的值 > tickCount 时 生成一个 雪花 实例
      let ticker = 0;      // 控制 一个雪花 生成 初始值
      let deltaTime = 0;   // 每次执行 loop函数的 增量 
  
      function createCanvas() {
        // canvas = document.createElement('canvas');
        // ctx = canvas.getContext('2d');
        ctx = wx.createCanvasContext('myCanvas');
      }
  
      function init() {
        createCanvas();
        // 小屏幕时延长添加雪花时间，避免屏幕上出现太多的雪花
        if (W < 768) {
          tickCount = 350;
        }
        loop();
      }
  
      // 请求帧动画 实现循环生成 雪花实例  IIFE   必须在 init方法 调用之前
      let requestAnimationFrame = (function() {
        return function (callback) {
          setTimeout(callback, 1000/ fps);
        }
      })();
  
  
      init();
      console.log(ctx, 'ctx');
  
      // ctx.translate(0, 0);
      // ctx.drawImage(snowImage, 300, 0, 20, 20);
      // ctx.draw()
  
      // 构造函数  飘雪构造函数
      /*
        @params x 飘落图片 相对于 canvas 画布左上角 x坐标
        @params y 飘落图片 相对于 canvas 画布左上角 y坐标
      */
      function Snow(x, y, radius) {
        // 每个雪花的实例的
        this.x = x;     // x坐标
        this.y = y;     // y坐标
       
        this.sx = 0;    // 上一帧和下一帧 x 轴方向 偏移量(初始化)
        this.sy = 0;    // 上一帧和下一帧 y 轴方向 偏移量(初始化)  sy 偏移量会随着 下落递增 存在加速度G
        this.deg = 0;   // 旋转角度 (初始化)
        this.radius = radius;  // 半径
        this.ax = Math.random() < 0.5 ? 0.005 : -0.005; // 初始化 x 轴的方向  正 向右飘  负 向左飘   0.005 x轴上的运动增量 相当于 y 轴上的 G
      }
  
      Snow.prototype.draw = function() {
        const radius = this.radius;
        ctx.save();  //保存绘图上下文
        ctx.translate(this.x, this.y);  //对当前坐标系的原点 (0, 0) 进行变换。默认的坐标系原点为页面左上角。
  
        ctx.rotate(this.deg * Math.PI / 180); //旋转度数
        /**
         drawImage(imageResource, dx, dy, dWidth, dHeight)
          number dx
          imageResource的左上角在目标 canvas 上 x 轴的位置
  
          number dy
          imageResource的左上角在目标 canvas 上 y 轴的位置
  
          number dWidth
          在目标画布上绘制imageResource的宽度，允许对绘制的imageResource进行缩放
  
          number dHeight
          在目标画布上绘制imageResource的高度，允许对绘制的imageResource进行缩放
         */
        // console.log(radius, '半径');
        ctx.drawImage(snowImage, -radius, radius * 1.8, radius * 2, radius * 2);  
        // ctx.drawImage(snowImage, 0, 0, radius * 2, radius * 2);  
  
        ctx.restore();  //恢复之前保存的绘图上下文
      }
  
      // 飘落  动起来
      Snow.prototype.update = function() {
        //随机雪花运动过程中的 角度变化
        const deltaDeg = Math.random() * 0.6 + 0.2;   
    
        this.sx += this.ax; 
  
        //当x轴方向的加速度达到 速度上线时 进行反向运动
        if (this.sx >= SPEED_LIMIT_X || this.sx <= -SPEED_LIMIT_X) {
          this.ax *= -1;
        }
        
        if (this.sy < SPEED_LIMIT_Y) {  //下落速度 为达到速度上线，进行加速度
          this.sy += G;
        }
    
        this.deg += deltaDeg;
        this.x += this.sx;
        this.y += this.sy;
  
      }
  
  
  /*
       // 生成雪花实例
       for(let i = 0; i < 10; i++){
        snows.push(
          // new Snow(Math.random() * W, 0, Math.random() * 5 + 5)
          new Snow(Math.random() * W, 0, Math.random() * 5 + 5)
        );
       }
       //绘制到画布上
       snows.map(function(s, i) {
          console.log(s, '每个实例');   
          s.draw();
      });
      ctx.draw();
  */
  
  
      //重复生成 雪花实力 函数
      function loop() {
        console.log(11);
        requestAnimationFrame(loop);  //回调 loop 函数
    
        ctx.clearRect(0, 0, W, H);  // 清空画布
        
        // const now = Date.now();
        deltaTime = 23;  // 每次 执行 loop 函数的 时间增量 
        // lastTime = now;
        ticker += deltaTime;
    
        if (ticker > tickCount) {
          snows.push(
            new Snow(Math.random() * W, 0, Math.random() * 5 + 5)
            // new Snow(Math.random() * W, Math.random() * H, Math.random() * 5 + 5)
          );
          ticker %= tickCount;
        }
    
        // const length = snows.length;
        snows.map(function(s, i) {
          s.update();
          s.draw();
          //飘出 屏幕底部 的 实例 移除
          if (s.y >= H) {
            snows.splice(i, 1);
          }
        });
        // 绘制
        ctx.draw();
        console.log('实例', snows[0]);
      }
  
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
      
        
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    this.setData({
      canvasHeight: H
    });
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    this.setData({
      dataList:[],

  })
  
    this.getData(8,0),
  
    wx.showToast({
      title: '刷新成功',
      image:'/image/cg.png',
      duration:1000,
    })

      wx.stopPullDownRefresh()

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
        wx.showLoading({
          title: '寻找中>ω<',
          duration:700,
        })

        this.onLoad


        var page=this.data.dataList.length
        this.getData(2,page)

       
        
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    
  }
})